<template>
  <Dialog title="任务重呼" v-model="dialogHeavy" width="800" class="heavy-task-dialog">
    <div class="dialog-content">
      <!-- 头部信息 -->
      <div class="dialog-header">
        <div class="header-icon">
          <Icon icon="ep:refresh" />
        </div>
        <div class="header-content">
          <h3 class="dialog-title">任务重呼</h3>
          <p class="dialog-subtitle">配置重呼任务参数</p>
        </div>
      </div>

      <!-- 表单内容 -->
      <div class="form-container">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          v-loading="formLoading"
          class="enhanced-form"
        >
          <el-form-item label="任务名称" prop="name" class="form-item">
            <div class="input-wrapper">
              <Icon icon="ep:document" class="input-icon" />
              <el-input
                v-model="formData.name"
                placeholder="请输入任务名称"
                class="enhanced-input"
              />
            </div>
          </el-form-item>

          <el-form-item label="呼叫结果选择" prop="typeList" class="form-item checkbox-item">
            <div class="checkbox-section">
              <div class="section-header">
                <Icon icon="ep:list" class="section-icon" />
                <span class="section-title">选择需要重呼的结果类型</span>
              </div>
              <div class="checkbox-grid">
                <el-checkbox-group v-model="formData.typeList" class="enhanced-checkbox-group">
                  <div v-for="scope in resultTypeMap" :key="scope.value" class="checkbox-card">
                    <el-checkbox :label="scope" class="checkbox-item-enhanced">
                      <div class="checkbox-content">
                        <Icon :icon="getResultIcon(scope.value)" class="result-icon" />
                        <span class="result-text">{{ scope.label }}</span>
                      </div>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogHeavy = false" class="cancel-btn">
          <Icon icon="ep:close" class="btn-icon" />
          取消
        </el-button>
        <el-button @click="submitForm" type="primary" :disabled="formLoading" class="confirm-btn">
          <Icon icon="ep:check" class="btn-icon" />
          确定
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import * as TaskApi from '@/api/call/task'
import * as AgentApi from '@/api/call/agent'

const dialogHeavy = ref(false)
const formLoading = ref(false)
const formData = reactive({
  name: '',
  typeList: [],
  id: null
})
const formRules = reactive({
  name: [
    {
      required: true,
      message: '请输入任务名称',
      trigger: 'blur'
    }
  ],
  typeList: [
    {
      required: true,
      message: '请选择呼叫结果',
      trigger: 'blur'
    }
  ]
})
const resultTypeMap = [
  { label: '呼叫成功', value: 1 },
  { label: '播放语音时挂断', value: 10 },
  { label: '播放语音完挂断', value: 11 },
  { label: '系统线路异常', value: 90 },
  { label: '黑名单或拦截', value: 91 },
  { label: '空号或号码错误', value: 92 },
  { label: '客户拒接或挂断', value: 93 },
  { label: '客户忙或未接听', value: 94 },
  { label: '坐席忙线未接听', value: 95 },
  { label: '呼叫失败', value: 99 }
]

// 获取结果图标
const getResultIcon = (value) => {
  switch (value) {
    case 1:
      return 'ep:check'
    case 10:
    case 11:
      return 'ep:video-pause'
    case 90:
      return 'ep:warning'
    case 91:
      return 'ep:lock'
    case 92:
      return 'ep:phone'
    case 93:
      return 'ep:user'
    case 94:
      return 'ep:clock'
    case 95:
      return 'ep:service'
    case 99:
      return 'ep:close'
    default:
      return 'ep:info-filled'
  }
}

const groupOptions = ref([])
/*打开*/
const open = async (id) => {
  dialogHeavy.value = true
  groupOptions.value = await AgentApi.groupSimple()
  getDetailObj(id)
}
/*获取任务详情*/
const getDetailObj = async (val) => {
  try {
    const { name, id } = await TaskApi.getTask(val)
    Object.assign(formData, { name, id })
  } catch {}
}
defineExpose({ open })
const formRef = ref(null)
const emit = defineEmits(['success'])
const submitForm = async () => {
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    const data = JSON.parse(JSON.stringify(formData))
    data.typeList = data.typeList.map((item) => item.value)
    await TaskApi.callRecall(data)
    ElMessage.success('操作成功')
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.heavy-task-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  :deep(.el-dialog__footer) {
    padding: 0;
    border-top: 1px solid #e5e7eb;
  }
}

.dialog-content {
  background: #f8fafc;
}

/* 对话框头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;

  @media (max-width: 768px) {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.dialog-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 表单容器 */
.form-container {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 20px;
  }
}

.enhanced-form {
  .form-item {
    margin-bottom: 24px;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
      font-size: 14px;
    }

    &.checkbox-item {
      :deep(.el-form-item__content) {
        line-height: normal;
      }
    }
  }
}

/* 输入框样式 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 16px;
  z-index: 1;
}

.enhanced-input {
  :deep(.el-input__wrapper) {
    padding-left: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

/* 复选框区域 */
.checkbox-section {
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.section-icon {
  color: #0052cc;
  font-size: 16px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.enhanced-checkbox-group {
  width: 100%;
  display: contents;
}

.checkbox-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;

  &:hover {
    background: #f1f5f9;
    border-color: #0052cc;
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.1);
  }
}

.checkbox-item-enhanced {
  width: 100%;
  margin: 0;

  :deep(.el-checkbox__input) {
    .el-checkbox__inner {
      border-radius: 4px;
      border-color: #d1d5db;
      transition: all 0.2s ease;

      &:hover {
        border-color: #0052cc;
      }
    }

    &.is-checked {
      .el-checkbox__inner {
        background-color: #0052cc;
        border-color: #0052cc;
      }
    }
  }

  :deep(.el-checkbox__label) {
    padding-left: 8px;
    width: 100%;
  }
}

.checkbox-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.result-icon {
  color: #6b7280;
  font-size: 16px;
  flex-shrink: 0;
}

.result-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  line-height: 1.4;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: white;

  @media (max-width: 768px) {
    padding: 16px 20px;
    flex-direction: column;
  }
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  background: white;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.confirm-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .form-container,
  .dialog-footer {
    background: #374151;
  }

  .dialog-title {
    color: #f9fafb;
  }

  .section-title {
    color: #f9fafb;
  }

  .section-header {
    border-bottom-color: #4b5563;
  }

  .checkbox-card {
    background: #4b5563;
    border-color: #6b7280;

    &:hover {
      background: #6b7280;
      border-color: #60a5fa;
    }
  }

  .result-text {
    color: #f9fafb;
  }

  .result-icon {
    color: #d1d5db;
  }

  .enhanced-input {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .input-icon {
    color: #d1d5db;
  }

  .checkbox-item-enhanced {
    :deep(.el-checkbox__input) {
      .el-checkbox__inner {
        background: #4b5563;
        border-color: #6b7280;

        &:hover {
          border-color: #60a5fa;
        }
      }

      &.is-checked {
        .el-checkbox__inner {
          background-color: #60a5fa;
          border-color: #60a5fa;
        }
      }
    }
  }
}
</style>
